<template>
  <div class="app-container">
    <div style="padding: 5px 0px">
      <toolbar :table="$refs.table" :moduleCode="$enums.moduleType.customer.value" @add="handleEdit"
        @delete="handleDelete" @refresh="handleRefresh" @export="handleExport" @import="handleImport"
        :buttons="['add', 'delete', 'export', 'import', 'log', 'search']">
        <template v-slot:search-slot>
          <span style="padding-left: 5px">
            <el-input v-model="filter.keyword" placeholder="请输入关键字" style="width: 200px" size="mini"
              clearable></el-input>
          </span>
          <span style="padding-left: 5px"><el-checkbox v-model="filter.activated" size="mini">仅启用</el-checkbox></span>
          <span style="padding-left: 5px"><el-button type="primary" size="mini"
              @click="handleSearch">搜索</el-button></span>
        </template>
      </toolbar>
    </div>
    <div>
      <el-table :data="list" border fit highlight-current-row ref="table" size="small" @cell-dblclick="hanldeDbClick">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="编码">
          <template slot-scope="scope">
            {{ scope.row.code }}
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="部门">
          <template slot-scope="scope">
            {{ scope.row.departmentName }}
          </template>
        </el-table-column>
        <el-table-column label="手机">
          <template slot-scope="scope">
            {{ scope.row.phone }}
          </template>
        </el-table-column>
        <el-table-column label="邮箱">
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.activated == false">已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row.id)">{{ $t("common.edit") }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right">
      <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
        :current-page.sync="filter.pageIndex" :page-sizes="[10, 20, 50, 100, 200, 500]"
        :page-size.sync="filter.pageSize" :prev-click="handlePrePage" :next-click="handleNextPage"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-drawer direction="rtl" :visible.sync="editDrawer" :with-header="false" size="30%">
      <div v-if="editDrawer">
        <edit :id.sync="currentId" @refresh="hanldeEditRefresh"></edit>
      </div>
    </el-drawer>
    <el-drawer direction="rtl" :visible.sync="importDrawer" :with-header="false" style="overflow: auto">
      <div v-if="importDrawer">
        <importPanel :moduleCode="$enums.moduleType.customer.value"></importPanel>
      </div>
    </el-drawer>
    <export-panel v-show="false" ref="export" :moduleCode="$enums.moduleType.customer.value"></export-panel>
  </div>
</template>

<script>
import toolbar from "@/components/Bar/toolbar.vue";
import edit from "./edit.vue";
import { getEmployees, deleteEmployee } from "@/api/employee";
import importPanel from "@/components/Import/index.vue";
import exportPanel from "@/components/Export/index.vue";
export default {
  components: {
    toolbar,
    edit,
    importPanel,
    exportPanel,
  },
  data() {
    return {
      list: null,
      filter: {
        pageIndex: 1,
        pageSize: 10,
        keyword: "",
        activated: null,
      },
      editDrawer: false,
      currentId: "",
      total: 0,
      importDrawer: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getEmployees(this.filter).then((res) => {
        res = res || { totalCount: 0, items: [] };
        this.total = res.totalCount;
        this.list = res.items;
      });
    },
    handlePageChange(pageIndex) {
      this.filter.pageIndex = pageIndex;
      this.getData();
    },
    handleSizeChange(pageSize) {
      this.filter.pageSize = pageSize;
      this.getData();
    },
    handlePrePage(currentPageIndex) {
      this.filter.pageIndex = currentPageIndex - 1;
    },
    handleNextPage(currentPageIndex) {
      this.filter.pageIndex = currentPageIndex + 1;
    },
    handleEdit(id) {
      this.editDrawer = true;
      this.currentId = id;
    },
    handleDelete({ ids }) {
      if (!ids || ids.length == 0) return;
      for (let i = 0; i < ids.length; i++) {
        deleteEmployee(ids[i]).then((res) => {
          if (i == ids.length - 1) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              position: "bottom-right",
            });
            this.getData();
          }
        });
      }
    },
    handleRefresh() {
      this.pageIndex = 1;
      this.pageSize = 10;
      this.getData();
    },
    hanldeEditRefresh() {
      this.editDrawer = false;
      this.getData();
    },
    hanldeDbClick(row) {
      this.currentId = row.id;
      this.editDrawer = true;
    },
    handleSearch() {
      this.handleRefresh();
    },
    handleExport() {
      this.$refs.export.exportData();
    },
    handleImport() {
      this.importDrawer = true;
    },
  },
  computed: {},
};
</script>
